<template>
  <div class="worklist content">
    <div class="head_top">
      <el-form
        :model="formInline"
        ref="formInline"
        class="demo-form-inline"
        label-width="60px"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="学科" prop="subject">
              <el-select v-model="formInline.subject" placeholder="请选择学科">
                <el-option
                  v-for="(item, index) in subjectlist"
                  :key="index"
                  :label="item.name"
                  :value="+item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="阶段" prop="step">
              <el-select v-model="formInline.step" placeholder="请选择">
                <el-option
                  v-for="(value, key, index) in stepObj"
                  :key="index"
                  :label="value"
                  :value="+key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="企业" prop="enterprise">
              <el-select
                v-model="formInline.enterprise"
                placeholder="请选择企业"
              >
                <el-option
                  v-for="(item, index) in companylist"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="题型" prop="type">
              <el-select v-model="formInline.type" placeholder="请选择题型">
                <el-option
                  v-for="(value, key, index) in typeObj"
                  :key="index"
                  :label="value"
                  :value="+key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :offset="2"></el-col> -->
          <el-col :span="5">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                v-model="formInline.difficulty"
                placeholder="请选择难度"
              >
                <el-option
                  v-for="(value, key, index) in difficultyObj"
                  :key="index"
                  :label="value"
                  :value="+key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="作者" prop="username">
              <el-input v-model="formInline.username" placeholder></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态" prop="status">
              <el-select v-model="formInline.status" placeholder="请选择状态">
                <el-option label="禁用" :value="0"></el-option>
                <el-option label="启用" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="日期" prop="create_date">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="formInline.create_date"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :offset="4"></el-col> -->
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="标题" prop="title">
              <el-input v-model="formInline.title" placeholder></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" icon="el-icon-plus" @click="add"
                >新增试题</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <el-table
        class="work_table"
        :data="tableData"
        border
        style="width: 1002px; margin:0 auto;"
      >
        <el-table-column label="序号" width="60">
          <template v-slot="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题目" width="150">
          <template v-slot="scope">
            <div>
              <span v-html="scope.row.title"></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="学科.阶段" width="120">
          <template v-slot="scope">
            <span
              >{{ scope.row.subject_name }}.{{ stepObj[scope.row.step] }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="题型" width="80">
          <template v-slot="scope">
            <span>{{ typeObj[scope.row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="company" label="企业" width="120">
          <template v-slot="scope">
            <span>{{ scope.row.enterprise_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建者" width="120">
          <template v-slot="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template v-slot="scope">
            <span>{{ scope.row.status == 0 ? "禁用" : "启用" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="reads"
          label="访问量"
          width="120"
        ></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="edit(scope.row.id)"
              v-if="$store.state.role != '学生'"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="changeStatus(scope.row.id)"
              v-if="$store.state.role != '学生'"
              >{{ scope.row.status == 0 ? "启用" : "禁用" }}</el-button
            >

            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[1, 5, 20, 40]"
        :page-size="pagination.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        class="page"
      ></el-pagination>
    </div>
    <workDialog
      ref="workDialog"
      :stepObj="stepObj"
      :difficultyObj="difficultyObj"
      :typeObj="typeObj"
      :subjectlist="subjectlist"
      :companylist="companylist"
      :type="status"
      @getData="getData"
    ></workDialog>
  </div>
</template>

<script>
import { getcompanyList } from "@/api/company.js";
import { getSubjectList } from "@/api/getSubjectList.js";
import { getworklist, changeStatus, getquestion } from "@/api/worklist.js";
import workDialog from "@/components/workDialog.vue";
export default {
  components: {
    workDialog,
  },
  data() {
    return {
      status: "add",
      formInline: {
        title: "", //	否	string	标题名称
        subject: "", //	否	int	学科id
        enterprise: "", //	否	int	企业id
        type: "", //	否	int	题目类型:1(单选),2(多选),3(简答)
        step: "", //	否	string	题目阶段:1(初级),2(中级),3(高级)
        username: "", //	否	string	作者
        status: "", //	否	int	状态:0(禁用),1(启用)
        difficulty: "", //	否	int	题目难度: 1(简单),2(一般),3(困难)
        create_date: "", //否	string	创建日期
        page: "", //	否	string	页码 默认为1
        limit: "", //	否	string	页尺寸 默认为10
      },
      tableData: [],
      companylist: [],
      subjectlist: [],
      pagination: {
        tatal: 1,
        currentPage: 1,
        pageSize: 1,
      },
      stepObj: {
        1: "初级",
        2: "中级",
        3: "高级",
      },
      typeObj: {
        1: "单选",
        2: "多选",
        3: "简答",
      },
      difficultyObj: {
        1: "简单",
        2: "一般",
        3: "困难",
      },
    };
  },
  methods: {
    //删除
    clear() {
      this.$refs.formInline.resetFields();
      this.search();
    },
    //搜索
    search() {
      this.pagination.currentPage = 1;
      this.getData();
    },
    add() {
      this.type = "add";
      this.$refs.workDialog.isShow = true;
    },
    handleClick(row) {
      console.log(row);
    },
    //获取列表信息
    getData() {
      let data = {
        ...this.formInline,
        limit: this.pagination.pageSize,
        page: this.pagination.currentPage,
      };
      getworklist(data).then((res) => {
        console.log("题库列表", res);
        this.tableData = res.data.data.items;
        this.pagination.total = res.data.data.pagination.total;
      });
    },
    //改变题目状态
    changeStatus(id) {
      changeStatus({ id }).then(() => {
        this.$message.success("状态改变成功");
        this.getData();
      });
    },
    //编辑题目
    edit(id) {
      getquestion({ id })
        .then((res) => {
          console.log("一道题", res);
          this.status = "edit";
          this.$refs.workDialog.isShow = true;
          let _obj = res.data.data;
          _obj.select_options = _obj.options;
          _obj.city = _obj.city.split(",");
          _obj.multiple_select_answer = _obj.multiple_select_answer.split(",");
          console.log("obj", _obj);
          this.$refs.workDialog.form = _obj;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    //页容量改变
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;
      this.getData();
    },
    //当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.getData();
    },
  },
  created() {
    this.getData();
    getcompanyList({ limit: 1000 }).then((res) => {
      console.log("企业列表", res);
      this.companylist = res.data.data.items;
    });
    getSubjectList({ limit: 1000 }).then((res) => {
      console.log("学科列表", res);
      this.subjectlist = res.data.data.items;
    });
  },
};
</script>

<style lang="less">
.head_top {
  // padding-right: 100px;
  padding-top: 20px;
}
.main {
  overflow: hidden;
  position: relative;
  .page {
    display: flex;
    justify-content: center;
  }
  .el-table td,
  .el-table th {
    text-align: center;
  }
}
</style>
